<script setup lang="ts">

import {ref} from "vue";
import {taskImage} from "../store/taskStore.ts";
import html2canvas from "html2canvas";

let proofImage = ref()
let ruleForm = ref()

function handleUploadRemove(file, fileList) {
  proofImage.value = ''
  ruleForm.value.message_img = ''
}
function handlePictureCardPreview(file) {
  console.log(proofImage.value)
}

function getBase64(file) {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader()
    let imgResult = ''
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgResult = reader.result
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(imgResult)
    }
  })
}

function getFile(file) {
  getBase64(file.raw).then(res => {
    proofImage.value = res//通过调用getBase64,就可以得到64编码
    console.log(proofImage.value)
  })
}




var imgSrc = "../assets/alipay.png";//本地项目文件夹下的图片
var imgSrc2 = "https://cdn.pixabay.com/photo/2024/04/25/06/50/banana-8719086_960_720.jpg" //可以
// getBase64_2(imgSrc2)
function getBase64_2(imgUrl) {
  window.URL = window.URL || window.webkitURL;
  var xhr = new XMLHttpRequest();
  xhr.open("get", imgUrl, true);
  // 至关重要
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (this.status == 200) {
      //得到一个blob对象
      var blob = this.response;
      console.log("blob", blob)
      // 至关重要
      let oFileReader = new FileReader();
      oFileReader.onloadend = function (e) {
        let base64 = e.target.result;
        console.log("方式一》》》》》》》》》", base64)
      };
      oFileReader.readAsDataURL(blob);
      //====为了在页面显示图片，可以删除====
      var img = document.createElement("img");
      img.onload = function (e) {
        window.URL.revokeObjectURL(img.src); // 清除释放
      };
      let src = window.URL.createObjectURL(blob);
      img.src = src
      document.getElementById("container1").appendChild(img);
      //====为了在页面显示图片，可以删除====

    }
  }
  xhr.send();
}


const generateImg = ()=>{
  let el = document.getElementById("test-id");
  let options = {
    width: el.offsetWidth,
    height: el.offsetHeight,
    useCORS: true, // 是否尝试使用 CORS 从服务器加载图像
    allowTaint: false, // 是否允许跨源图像污染画布
  }

  html2canvas(el, options).then((canvas) => {
    let imgData = canvas.toDataURL("image/jpeg"); // 转base64
    console.log(imgData)
    // fileDownload(imgData);
  });
};

// 下载图片方法
const fileDownload = (downloadUrl) => {
  let aLink = document.createElement("a");
  aLink.style.display = "none";
  // 以防base64过长导致下载失败，所以将base64转成blob格式
  aLink.href = URL.createObjectURL(dataURIToBlob(downloadUrl));
  aLink.download = "img.png";
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
};

// base64转blob方法
const dataURIToBlob = (dataURI) => {
  let binStr = atob(dataURI.split(",")[1]),
      len = binStr.length,
      arr = new Uint8Array(len);

  for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
  return new Blob([arr]);
}

</script>

<template>
  <el-upload
      list-type="picture"
      action=''
      accept=".jpg, .png"
      :limit="1"
      :auto-upload="false"
      :on-change="getFile"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleUploadRemove"
  >
    <el-button size="small" type="primary">选择图片上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件</div>
  </el-upload>

  <!--  用64编码展示图片-->
  <img :src=taskImage alt="图片未上传" />




  <p id="container1"></p>

  <div id="test-id" @click="generateImg">
      <div>今天是个好天气</div>
      <div>测试截图中</div>
      <div>最后一行</div>
  </div>


</template>

<style scoped>

</style>